$(function () {
    //监听iframe 变化 进行参数传递
    $("#mainFrame").load(function() {
        if (vm.loadParams){
            window.frames["mainFrame"].vm.loadData(vm.loadParams);
            vm.loadParams = null;
        }
    });

    $(document).on("mouseenter", "#navbar-collapse ul.nav li.actives", function () {
        $(this).addClass("active");
        $(this).addClass("active");
        var lists = $(this).attr("id");
        $("div." + lists).show();
        $(this).siblings().find(".menu_pos").hide();
        $(this).siblings().removeClass("active");
    });
    $(document).on("mouseleave", "#navbar-collapse ul.nav li.actives", function () {
        var lists = $(this).attr("id");
        $("div." + lists).hide();
        $(this).removeClass("active");
    });


})

//生成菜单
var menuItem = Vue.extend({
    name: 'menu-item',
    props: {item: {}, index: 0},
    computed: {
        idIndex: function () {
            return 'active' + this.index;
        },
        classIndex: function () {
            return 'menu_pos active' + this.index;
        },
        //动态计算样式
        styleObject: function () {
            var width = 120 * this.item.list.length + 2 + "px";
            var cListLength = 1;
            if (this.item.list) {
                this.item.list.forEach(function (element) { //循环取出最大长度
                    if (element.list) {
                        if (element.list.length > cListLength) {
                            cListLength = element.list.length;
                        }
                    }
                });

                this.item.list.forEach(function (element) { //循环变更最大长度
                    if (element.list) {
                        var num = cListLength - element.list.length;
                        for (var i = 0; i < num; i++) {
                            element.list.push({})
                        }
                    }
                });
            }
            var height = 30 * cListLength + 30 + "px";
            return {width: width, height: height};

        }
    },
    template: [
        '<li class="actives" :id="idIndex">',
        '<div :class="classIndex">',
        '<div  class="nav_contain" :style="styleObject" >',
        '	<ul v-if="item.type === 0"  class="menu">',
        '		<li class="nav_type" :type="item.type"  v-for="(itemC, indexC) in item.list"  >',
        '			<span style="font-size: 13px">{{itemC.name}}</span>' +
        '			<ul v-if="itemC.type === 0" class="lists" >',
        '				<li    v-for="itemCC in itemC.list" >',
        /*'					<i v-if="itemCC.icon != null" :class="itemCC.icon"></i>',*/
        '					<a style="font-size: 10px" :href="\'#\'+itemCC.url">{{itemCC.name}}</a>  ',
        '				</li>												',
        '			</ul>	',
        '			<ul v-if="itemC.type === 1" class="lists" >',
        '				<li>',
        /*'					<i v-if="itemCC.icon != null" :class="itemCC.icon"></i>',*/
        '					<a style="font-size: 10px" :href="\'#\'+itemC.url">{{itemC.name}}</a>  ',
        '				</li>												',
        '			</ul>	',
        '		</li>',
        '	</ul>',
        '</div>',
        '</div>',
        '<a class="menu" href="#"><i v-if="item.icon != null" :class="item.icon"></i>{{item.name}}</a>',
        '</li>'

        /*  '<li >',
          '	<a v-if="item.type === 0" href="javascript:;" data-toggle="dropdown">',
          '		<i v-if="item.icon != null" :class="item.icon"></i>',
          '		<span>{{item.name}}</span>',
          '	</a>',
          '	<ul v-if="item.type === 0" class="dropdown-menu" role="menu">',
          '		<menu-item :item="item" v-for="item in item.list"></menu-item>',
          '	</ul>',

          '	<a v-if="item.type === 1 && item.parentId === 0" :href="\'#\'+item.url">',
          '		<i v-if="item.icon != null" :class="item.icon"></i>',
          '		<span>{{item.name}}</span>',
          '	</a>',

          '	<a v-if="item.type === 1 && item.parentId != 0" :href="\'#\'+item.url">' +
          '		<i v-if="item.icon != null" :class="item.icon"></i>' +
          '		<i v-else class="fa fa-circle-o"></i> {{item.name}}</a>',
          '</li>'*/
    ].join('')
});

//iframe自适应
$(window).on('resize', function () {
    var $content = $('.content');
    $content.height($(this).height() - 120);
    $content.find('iframe').each(function () {
        $(this).height($content.height());
    });
}).resize();

//注册菜单组件
Vue.component('menuItem', menuItem);

var vm = new Vue({
    el: '#rrapp',
    data: {
        user: {},
        message: {},
        menuList: {},
        main: "main.html",
        password: '',
        newPassword: '',
        navTitle: "首页",
        navMenu: "",
        navIcon: "fa fa-home",
        loadParams: null,
    },
    methods: {
        getMenuList: function (event) {
            $.getJSON("sys/menu/nav?_" + $.now(), function (r) {
                // console.log(r.menuList);
                vm.menuList = r.menuList;
            });
        },
        getUser: function () {
            $.getJSON("sys/user/info?_" + $.now(), function (r) {
                vm.user = r.user;
            });
        },
        updatePassword: function () {
            layer.open({
                type: 1,
                skin: 'layui-layer-lan',
                title: "修改密码",
                area: ['550px', '270px'],
                shadeClose: false,
                content: jQuery("#passwordLayer"),
                btn: ['修改', '取消'],
                btn1: function (index) {
                    var data = "password=" + vm.password + "&newPassword=" + vm.newPassword;
                    $.ajax({
                        type: "POST",
                        url: "sys/user/password",
                        data: data,
                        dataType: "json",
                        success: function (result) {
                            if (result.code == 0) {
                                layer.close(index);
                                layer.alert('修改成功', function (index) {
                                    location.reload();
                                });
                            } else {
                                layer.alert(result.msg);
                            }
                        }
                    });
                }
            });
        },
        donate: function () {
            layer.open({
                type: 2,
                title: false,
                area: ['806px', '467px'],
                closeBtn: 1,
                shadeClose: false,
                content: ['', 'no']
            });
        },
        //页面跳转
        goto: function (data) {
            window.location.hash = data.hash;
            vm.loadParams = data;
        }
    },
    created: function () {
        this.getMenuList();
        this.getUser();
    },
    updated: function () {
        //路由
        var router = new Router();
        routerList(router, vm.menuList);
        router.start();
    }
});


function routerList(router, menuList) {
    for (var key in menuList) {
        var menu = menuList[key];
        if (menu.type == 0) {
            routerList(router, menu.list);
        } else if (menu.type == 1) {
            router.add('#' + menu.url, function () {
                var url = window.location.hash;

                //替换iframe的url
                vm.main = url.replace('#', '');
                vm.navTitle = $("a[href='" + url + "']").text();
                vm.navMenu = $("a[href='" + url + "']").parents("li.actives").find('a.menu').text();
                vm.navIcon = $("a[href='" + url + "']").parents("li.actives").find('a.menu i').attr("class");
                //导航菜单展开
                /*$(".dropdown-menu li").removeClass("active");
                $("a[href='" + url + "']").parents("li").addClass("active");
                vm.navTitle = $("a[href='" + url + "']").text();
                vm.navMenu = $(".my-menu").find("li.active").children("a")[0].text;*/
            });
        }
    }
}
